<script setup>
import { computed, ref, onMounted } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const academicOriginData = computed(() => store.state.academicOrigin)
const form = ref({ ...academicOriginData.value })
const readOnly = ref(true)

const toggleEdit = async () => {
  readOnly.value = !readOnly.value
  if (readOnly.value) {
    await store.dispatch('updateAcademicOrigin', form.value)
  }
}

onMounted(async () => {
  await store.dispatch('getAcademicOrigin')
})
</script>

<template>
  <el-card class="academic-origin-card">
    <el-form :model="form" label-width="120px">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="职称等级">
            <el-input v-model="form.professionalLevel" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职务">
            <el-input v-model="form.zhiwu" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="大专院校">
            <el-input v-model="form.dazhuan" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大专专业">
            <el-input v-model="form.dazhuanMajor" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="本科院校">
            <el-input v-model="form.benke" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本科专业">
            <el-input v-model="form.benkeMajor" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="本科级别">
            <el-input v-model="form.benkeLevel" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="硕士院校">
            <el-input v-model="form.shuoshi" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="硕士专业">
            <el-input v-model="form.shuoshiMajor" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="硕士级别">
            <el-input v-model="form.shuoshiLevel" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="博士院校">
            <el-input v-model="form.phd" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="博士专业">
            <el-input v-model="form.phdMajor" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="博士级别">
            <el-input v-model="form.phdLevel" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="博士后院校">
            <el-input v-model="form.afterphd" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="博士后级别">
            <el-input v-model="form.afterphdLevel" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="toggleEdit">
          {{ readOnly ? '修改' : '保存' }}
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>
.academic-origin-card {
  max-width: 950px;
  margin: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
